/*
 * @Author       : xinbaiyu
 * @Version      : V1.0
 * @Date         : 2025-03-03 17:28:02
 * @Description  : 
 */
import { createApp } from 'vue';
import ElementPlus from 'element-plus'
import elementCssContent from '../../components/css/element.less?raw' // 使用 ?raw 参数将 CSS 文件作为字符串导入
import sessionCssContent from '../../components/css/Session.less?raw' // 使用 ?raw 参数将 CSS 文件作为字符串导入
import tipBoxCssContent from '../../components/css/Tipbox.less?raw' // 使用 ?raw 参数将 CSS 文件作为字符串导入
import talkItemCssContent from '../../components/css/TalkItem.less?raw' // 使用 ?raw 参数将 CSS 文件作为字符串导入
import TipBox from '@/components/Tipbox.vue'
import less from 'less';

export default defineContentScript({
  matches: ['<all_urls>'],

  main(ctx) {
    const ui = createIntegratedUi(ctx, {
      position: 'inline',
      anchor: 'body',
      onMount: (container) => {
        // 创建 Shadow DOM 
        const shadowRoot = container.attachShadow({ mode: 'open' });
        // 创建一个临时的 div 元素，用于挂载 Vue 应用
        const appContainer = document.createElement('div');
        shadowRoot.appendChild(appContainer);
        const cssContentArr = [elementCssContent, sessionCssContent, tipBoxCssContent, talkItemCssContent]
        cssContentArr.forEach(async cssContent => {
          // 创建一个 style 元素并将 CSS 内容添加进去
          const style = document.createElement('style')
          style.textContent = (await less.render(cssContent)).css
          shadowRoot.appendChild(style)
        })
        // Create the app and mount it to the UI container
        const app = createApp(TipBox);
        app.use(ElementPlus)
        app.mount(appContainer);
        return app;
      },
      onRemove: (app) => {
        // Unmount the app when the UI is removed
        app?.unmount();
      },
    });

    // Call mount to add the UI to the DOM
    ui.mount();
  },
});
